<template>
    <div class="wrapper-home">
        <van-swipe class="my-swipe" :autoplay="3000">
            <van-swipe-item v-for="(item,index) in bannerimg">
                <img :src="item.banner_img" style="width:100%;height:100%;"/>
            </van-swipe-item>
        </van-swipe>
        <ul class="list">
            <li>
                <van-icon name="vip-card" class="listIcon listIcon1"/>
                <p>特色课</p>
            </li>
            <li>
                <van-icon name="chat-o" class="listIcon listIcon2"/>
                <p>一对一辅导</p>
            </li>
            <li>
                <van-icon name="notes-o" class="listIcon listIcon3"/>
                <p>学习日历</p>
            </li>
        </ul>

        <div class="teacherList">
            <p class="title"><span class="titleRed"></span>资深讲师</p>
            <ul>
                <li v-for="(chlidren,index) in this.list1" @click="goDetail(chlidren.teacher_id)">
                   <img :src="chlidren.teacher_avatar"/>
                   <div>
                       <p>{{chlidren.teacher_name}}</p>
                       <p>{{chlidren.introduction}}</p>
                   </div>
                </li>
            </ul>
        </div>
        <div class="curriculum">
            <p class="title"><span class="titleRed"></span>推荐课程</p>
            <ul>
                <li v-for="(chlidren,index) in this.list2" @click="goCourceDetail(chlidren.id)">
                   <p class="headline">{{chlidren.title}}</p>
                   <p class="smallhead">共点击量{{chlidren.sales_num}}</p>
                   <p class="img">
                       <img :src="chlidren.cover_img" style="width:1rem;height:1rem"/>
                   </p>
                   <p class="bottom">
                       <span>{{chlidren.id}}人报名</span>
                       <span class="spans"><van-icon name="points" />{{chlidren.underlined_price}}</span>
                   </p>
                </li>
            </ul>
        </div>
        <div class="teacherList">
            <p class="title"><span class="titleRed"></span>名称</p>
            <ul>
                <li v-for="(chlidren,index) in this.list3" @click="goDetail(chlidren.teacher_id)">
                   <img :src="chlidren.teacher_avatar"/>
                   <div>
                       <p>{{chlidren.teacher_name}}</p>
                       <p>{{chlidren.introduction}}</p>
                   </div>
                </li>
            </ul>
        </div>

        <tabs></tabs>
    </div>
</template>

<script>
import { cartList, banner } from "../request/http.js";
import tabs from '../components/tabs'
export default {
  components:{
    tabs
  },
  data() {
    return {
      bannerimg: [],
      list1: [],
      list2: [],
      list3: [],
    };
  },
  mounted() {
    this.getBanner();
    cartList().then(res => {
      console.log(res);
      this.list1 = res.data.data[0].list;
      this.list2 = res.data.data[1].list;
      this.list3 = res.data.data[2].list;
    });
  },
  methods: {
     
    getBanner() {
      banner().then(res => {
        console.log(res);
        this.bannerimg = res.data.data;
      });
    },
    goDetail(id){
        console.log(id);
        this.$router.push({
            path:'/details',
            query:{
                id:id
            }
        })
    },
    goCourceDetail(id){
      console.log(id);
      this.$router.push({
        path:'/courceDetail',
        query:{id:id}
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper-home {
  margin-bottom: 1.45rem;
  .my-swipe {
    width: 100%;
    height: 2.5rem;
  }
  .list {
    width: 100%;
    position: relative;
    top: -0.5rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0rem .3rem;
    li {
      list-style: none;
      
      width: 2.7rem;
      height: 2.7rem;
      background: rgba($color: #ffffff, $alpha: 0.99);
      border-radius: 0.5rem;
     
      .listIcon {
        font-size: 1rem;
        padding: 0.4rem 0.85rem;
      }
      .listIcon1 {
        color: rgb(30, 30, 247);
      }
      .listIcon2 {
        color: rgb(21, 255, 0);
      }
      .listIcon3 {
        color: rgb(247, 30, 30);
      }
      p {
        width: 100%;
        text-align: center;
        color: #bbb;
        margin-top: 0.2rem;
      }
    }
  }
  .teacherList {
    width: 100%;
    margin-top: 1rem;
    box-sizing: border-box;
    padding: 0.1rem;

    .title {
      width: 100%;
      font-size: 0.5rem;
      display: flex;
      .titleRed {
        width: 0.1rem;
        height: 0.6rem;
        background: red;
        display: block;
        margin-right: 0.1rem;
      }
    }
    ul {
      list-style: none;
      width: 100%;
      margin-top: 0.2rem;
      li {
        width: 100%;
        height: 2.8rem;
        background: #ffffff;
        margin-top: 0.1rem;
        padding: 0.5rem;
        box-sizing: border-box;

        display: flex;
        img {
          width: 1.3rem;
          height: 1.3rem;
          border-radius: 50%;
        }
        div {
          p {
            margin-top: 0.2rem;
            margin-left: 0.2rem;
          }
        }
      }
    }
  }

  .curriculum {
    width: 100%;
    padding: 0.1rem;
    margin-top: 0.5rem;
    box-sizing: border-box;
    .title {
      width: 100%;
      font-size: 0.5rem;
      display: flex;
      .titleRed {
        width: 0.1rem;
        height: 0.6rem;
        background: red;
        display: block;
        margin-right: 0.1rem;
      }
    }
    ul {
      width: 100%;
      list-style: none;
      li {
        width: 100%;
        height: 3.5rem;
        background: #ffffff;
        margin-top: 0.1rem;
        box-sizing: border-box;
        padding: 0.3rem;
        .headline {
          font-size: 0.43rem;
        }
        .smallhead {
          margin-top: 0.1rem;
        }
        .img {
          margin-top: 0.2rem;
          width: 1rem;
          height: 1rem;
          img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
        .bottom {
          width: 100%;
          margin-top: 0.3rem;
          .spans {
            float: right;
            color: orange;
          }
        }
      }
    }
  }
}
</style>